<!--
 * @Author: 刘十三
 * @Date: 2023-12-28 11:18:14
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-03-15 10:48:47
 * @FilePath: \NM-dev-1.3.1\dev\pages\query\specialArea\specialAreaInfo.vue
 * @Description: 监管对象查询-特殊区域查询 （改造，2024-03-08）节日快乐
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999"></theme-navbar>
    <!-- #endif -->

    <view class="header-list">
      <u-tabs :list="tabList" :show-bar="true" :is-scroll="false" :current="current" @change="handleChange" :bold="false"></u-tabs>
    </view>
    <view class="header-serach" v-if="current > 1">
      <u-search shape="round" placeholder="请输入搜索条件" v-model="keyWord" :show-action="false" disabled @tap="handleSearch"></u-search>
    </view>

    <u-divider bg-color="#f5f5f5" :height="current > 1 ? 195 : 100" half-width="100%"></u-divider>

    <view class="content">
      <view class="content-main" v-show="current == 0">
        <specialAreaBaseInfo :info="itemInfo"></specialAreaBaseInfo>
      </view>
      <view class="content-main" v-show="current == 1">
        <view class="info-lay" v-if="imgList.length > 0">
          <m-upload maxCount="0" :file-list="imgList" width="210" height="210" :disabled="true" :deletable="false" upApiUrl="uploadBase64File" :uploadParam="{ fiGroupCode: $FILE_GROUP_TYPE.m_special_area_attr }"></m-upload>
        </view>
        <view class="info-lay" v-else>
          <u-image width="100%" height="330rpx" mode="scaleToFill" :src="'/static/certificate/noImg.png'"></u-image>
        </view>
      </view>
      <view class="content-main" v-show="current == 2">
        <checkRecordList :height="getHeight" :areaUuid="areaUuid" ref="checkRecordList" />
      </view>
      <view class="content-main" v-show="current == 3">
        <caseRecordList :height="getHeight" :areaUuid="areaUuid" ref="caseRecordList" />
      </view>
    </view>
  </view>
</template>

<script>
import formSection from "@/components/form-section.vue";
import queryService from "@/service/query/query.service";
import certificateService from "@/service/certificate/certificate.service.js";
import mUpload from "@/components/m-upload.vue";
import specialAreaBaseInfo from "./components/specialAreaBaseInfo.vue";
import checkRecordList from "./components/checkRecordList.vue";
import caseRecordList from "./components/caseRecordList.vue";

export default {
  name: "SpecicalAreaInfo",
  components: {
    specialAreaBaseInfo,
    checkRecordList,
    caseRecordList,
    formSection,
    mUpload,
  },
  onLoad(opt) {
    this.areaUuid = opt.areaUuid;
  },
  data() {
    return {
      keyWord: "",
      areaUuid: "",
      itemInfo: {
        coordinate: "",
      },
      imgList: [],
      tabList: [
        {
          name: "基本信息",
        },
        {
          name: "场所照片",
        },
        {
          name: "检查记录",
        },
        {
          name: "涉案记录",
        },
      ],
      current: 0,
    };
  },
  computed: {
    getHeight() {
      let top = this.current > 1 ? 195 : 100; // 这个取占位符高度
      let p = this.$u.sys().windowHeight - 44 - uni.upx2px(top) - this.$u.sys().statusBarHeight + "px";
      // #ifdef H5-DINGDING || H5-WECHAT || H5-EMP
      p = this.$u.sys().windowHeight - -uni.upx2px(top) - this.$u.sys().statusBarHeight + "px";
      // #endif
      return p;
    },
  },
  created() {
    this.init();
    this.initAuditImage();
  },
  methods: {
    handleChange(current) {
      this.current = current;
    },
    init() {
      this.$modal.showLoading("加载中...");
      queryService
        .findById({
          id: this.areaUuid,
        })
        .then((res) => {
          this.$modal.hideLoading();
          if (res.success) {
            this.itemInfo = res.bean;
            this.itemInfo.longitude = res.bean.longitude || "";
            this.itemInfo.latitude = res.bean.latitude || "";
            this.itemInfo.coordinate = `${res.bean.longitude || ""},${res.bean.latitude || ""}`;
          } else {
            this.$u.toast(res.msg);
          }
        })
        .catch((e) => {
          this.$modal.hideLoading();
          this.$u.toast("获取详情失败");
        });
    },
    initAuditImage() {
      certificateService
        .goFiles(this.areaUuid, this.$FILE_GROUP_TYPE.m_special_area_attr)
        .then((res) => {
          if (res.success) this.imgList = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleSearch() {
      if (this.current == 2) {
        this.$refs.caseRecordList.handleRest();
        this.$refs.checkRecordList.searchVisable = true;
      } else if (this.current == 3) {
        this.$refs.checkRecordList.handleRest();
        this.$refs.caseRecordList.searchVisable = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 0;
  background: #f5f5f5;
}
.header-list {
  position: fixed;
  background: white;
  padding: 0rpx 24rpx;
  /* #ifdef H5-ONLY  */
  top: 44px;
  /* #endif */
  /* #ifndef H5-ONLY  */
  top: 0px;
  /* #endif */
  left: 0px;
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
}
.header-serach {
  position: fixed;
  background: white;
  padding: 10rpx 50rpx 24rpx;
  /* #ifdef H5-ONLY  */
  top: 84px;
  /* #endif */
  /* #ifndef H5-ONLY  */
  top: 44px;
  /* #endif */
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
}
.content {
  padding: 0 10px;
  background: #f5f5f5;

  .info-lay {
    min-height: 100px;
    padding: 8px 5px;
    border-radius: 5px;
    background: white;
  }
}
</style>
